<template>
    <div class="container sub-container">
        <div class="inner">
            <Breadcrumb class="system-breadcrumb">
                <BreadcrumbItem to="/meeting2">支部委员会</BreadcrumbItem>
                <BreadcrumbItem>新建</BreadcrumbItem>
            </Breadcrumb>
            <div class="system-form system-form-large">
                <Form ref="form" :model="form" :rules="ruleValidate" :label-width="120" :hide-required-mark="true">
                    <FormItem prop="title" label="标题">
                        <Input class="common-input" v-model="form.title" placeholder="请输入标题" />
                    </FormItem>
                    <FormItem prop="targetUserIds" label="接收人">
                        <Select class="common-input" v-model="form.targetUserIds"  multiple  placeholder="请选择接收人">
                            <Option v-for="item in userList" :value="item.id" :key="item.id">{{ item.username }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem prop="content" label="大会内容">
                        <system-quill-editor v-model="form.content"></system-quill-editor>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" class="margin-right-25" @click="handleSubmit('form')">发送</Button>
                        <Button type="primary" @click="goBack" ghost>返回</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
import SystemQuillEditor from '@/components/SystemQuillEditor'
import { getUserListNoselfRest, sendMessageRest } from '@/common/apis/system'

export default {
    name: "noticeAdd",
    components: {
        SystemQuillEditor
    },
    data() {
        return {
            type: 1,
            userList: [],
            form: {
                title: '',
                targetUserIds: '',
                fileSHA1: '',
                content: ''
            },
            ruleValidate: {
                title: [
                    { required: true, message: '标题不能为空', trigger: 'blur' }
                ],
                targetUserIds: [
                    { required: true, type: 'array', message: '接收人不能为空', trigger: 'change' }
                ],
                content: [
                    { required: true, message: '公告内容不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData() {
            this.getUserListNoself()
        },
        getUserListNoself() {
            getUserListNoselfRest().then(result =>{
                this.userList = result.data.content
            })
        },
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    const params = {
                        ...this.form,
                        type: this.type
                    }
                    sendMessageRest(params).then(result => {
                        if (result.data.code === 200) {
                            this.handleSuccess()
                        } else {
                            this.handleError(result.data.msg)
                        }
                    })
                }
            })
        },
        handleSuccess(msg) {
            this.reset()
            this.$Message.success({
                background: true,
                content: msg || '发送成功'
            })
        },
        handleError(msg) {
            this.reset()
            this.$Message.error({
                background: true,
                content: msg || '发送失败'
            })
        },
        reset() {
            this.$refs.form.resetFields()
            this.$refs.myQuillEditor.handleClearEditor()
        },
        goBack() {
            this.$router.push('/meeting2')
        }
    }
}
</script>
